var data = [
  {
    text: "找女朋友的建议：1.找一个不需要太漂亮的，重要的是耐看。2.找一个最好会做饭的。3.找一个性格不强势的。4.找一个善解人意的。5.这是最重要的一点，最好不要让她们互相认识，千万要记得。",
    time: "2023-04-01 08:00:00",
  },
  {
    text: "人在江湖飘，心脏和字节只能有一个跳动。",
    time: "2023-03-01 08:00:00",
  },
];

const content = document.querySelector(".content");
const sendBtn = document.querySelector("#send");
const list = document.querySelector(".list");

data.forEach((item) => {
  genLi(item.text, item.time);
});

function getDate() {
  let d = new Date();
  d.setHours(d.getHours() + 8);
  return d.toJSON().substring(0, 19).replace("T", " ");
}

function newLi() {
  if (content.value.trim() === "") {
    return alert("内容不能为空");
  }
  genLi(content.value, getDate());
}

function genLi(value, date) {
  const li = document.createElement("li");
  li.innerHTML = `<div class="c-user">
          <div class="contain">
            ${value}                
          </div>
          <div class="opt">${date}</div>
          <div class="opt">
            <button class="cmm">评论</button>
            <button class="del">删除</button>
          </div>
        </div>
        <div class="commont"></div>`;
  list.append(li);

  content.value = "";
}

sendBtn.addEventListener("click", newLi);
content.addEventListener("keyup", (e) => {
  if (e.which === 13 && e.ctrlKey) {
    newLi();
  }
});

var tarContainer = null;
var mask = document.querySelector(".mask");
var inner = document.querySelector(".inner");
list.addEventListener("click", (e) => {
  if (e.target.classList.contains("del")) {
    e.target.parentNode.parentNode.parentNode.remove();
  } else if (e.target.classList.contains("cmm")) {
    tarContainer = e.target.parentNode.parentNode.nextElementSibling;
    mask.style.display = "block";
    inner.style.display = "block";
  }
});
mask.addEventListener("click", hideMask);
document.querySelector("#cancel").addEventListener("click", hideMask);
function hideMask() {
  mask.style.display = "";
  inner.style.display = "";
  cmmText.value = "";
  tarContainer = null;
}

var cmmText = document.querySelector(".user-cmm");
document.querySelector("#send-cmm").addEventListener("click", function () {
  if (!tarContainer) return;
  var text = cmmText.value;
  tarContainer.innerHTML = `<div class="c-user">
          <div class="contain">
            ${text}
          </div>
          <div class="opt">${getDate()}</div>
          <div class="opt">
            <button class="cmm">评论</button>
            <button class="del">删除</button>
          </div>
        </div>
        <div class="commont"></div>`;
  hideMask();
});
